<!-- AnalysisDetail.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<title>分析</title>
		<style type="text/css">
			body{
				background-color: white;
			}
			*{margin: 0;padding: 0;}
			a{-webkit-tap-highlight-color:rgba(0, 0, 0, 0);  
			-moz-tap-highlight-color:rgba(0, 0, 0, 0);  
			-ms-tap-highlight-color:rgba(0, 0, 0, 0);  
			-o-tap-highlight-color:rgba(0, 0, 0, 0);  
			tap-highlight-color:rgba(0, 0, 0, 0);  }
			.nav-tab{overflow: hidden;padding: 0 .24rem;}
			.nav-tab li{list-style: none;}
			.nav-tab li a{font-size: .32rem;display: block;text-align: center;text-decoration: none;color: #333;padding: .26rem 0;}
			.nav-tab li a span{padding-bottom: .05rem;}
			.nav-tab .nav-tab-active a span{border-bottom: 2px solid #5ebab5;color: #5ebab5;}

			.selBox {position: relative;}
			.table_box {margin-bottom: 0.3rem;z-index: 99999;width: 4.32rem;height: 0.62rem;font-size: 0.24rem;background: #fff;box-sizing: border-box;
				border: 1px solid #5ebab5;margin-left: auto;margin-right: auto;}
			.table_cont {height: 100%;font-size: 0.24rem;background: url(http://cfnet.org.cn/public/themes/classic2/images/freecourse/kecheng_icondown.png) right center no-repeat;
	    		background-size: 0.62rem 0.62rem;line-height: 0.62rem;padding-left: 0.3rem;color: #333;
	    		width: 100%;box-sizing: border-box;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
	    		padding-right: .7rem;}
	    	.table_list {position: absolute; top: 0.62rem;z-index: 9;width: 4.32rem;font-size: 0.24rem;background: #fff;box-sizing: border-box;
	    		border-bottom: 1px solid #5ebab5;border-right: 1px solid #5ebab5;border-left: 1px solid #5ebab5;display: none;left: 50%;margin-left: -2.16rem;}
	    	.table_xxcont { /*width: 4.22rem;*/height: 0.53rem;font-size: 0.24rem;line-height: 0.54rem;padding-left: 0.3rem; box-sizing: border-box;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

	    	.cont{padding:0 .24rem;}
	    	.partCont{margin-bottom: .4rem;border-radius: 3px;overflow: hidden;}
	    	.partCont h3{font-size: .28rem;color: #333;text-align: center;margin-bottom: .3rem;line-height:1.5;}
	    	.teamstatus{background: #5ebab5;border-radius: 3px;height: 3.7rem;}
	    	.team-statop{padding: .3rem .44rem 0;color: #fff;}
	    	.team-statop p{font-size: .28rem;text-align: center;}
	    	.team-statop ul{font-size: .24rem;overflow: hidden;border-bottom: 1px solid #fff;text-align: center;padding: .4rem 0 .3rem;}
	    	.team-statop ul li{float: left;width: 50%;list-style: none;}
	    	.team-colred{color: #f05214;}
	    	.team-stabot{padding-top: .6rem;height: 1.16rem;/* padding-left:23%;  */width: 18em;font-size: .22rem;margin-left: auto;margin-right: auto;}
	    	.team-stabot p{color: #fff;font-size: .22rem;text-align: center;line-height: 2;float: left;width: 6em;white-space: nowrap;}
	    	.team-stabot p span{display: block;text-overflow: ellipsis;overflow: hidden;}
	    	.p-left{background: #8ec165;margin-top: .2rem;box-sizing: border-box;padding-top:.1rem;}
	    	.p-center{background: #fb6b5b;height: 100%;box-sizing: border-box;padding-top:.3rem; }
	    	.p-right{background: #87CEFA;margin-top: .3rem;}

	    	.part-tit{background:#5ebab5;text-align: center;font-size: .28rem;line-height: .77rem; color: #fff;}
	    	.part-canvas{background: #f0f0f0;}
	    	#eart1{height: 6rem;width: 100%;}
	    	#eart2{height: 4.5rem;width: 100%;}
	    	#eart4{height: 4.6rem;width: 100%;}
			.part-taiducont{background-color:#f0f0f0;}
	    	.taidu{height: 3rem;width: 65%;margin:0 auto;border-bottom: 1px solid #5ebab5;overflow: hidden;}
	    	.taidu h4{font-size: .24rem;color: #333;text-align: center;margin:.3rem 0; }
	    	.taidu p{font-size: .2rem;color: #333;text-align: center;}
	    	#eart3-3,#eart3-2,#eart3-1{width: 100%;height: 1.3rem;}
	    	@font-face {
				font-family: 'iconfont2';  /* project id 1076597 */
				src: url('http://at.alicdn.com/t/font_1076597_rbju2ebsnm.eot');
				src: url('http://at.alicdn.com/t/font_1076597_rbju2ebsnm.eot?#iefix') format('embedded-opentype'),
				url('http://at.alicdn.com/t/font_1076597_rbju2ebsnm.woff2') format('woff2'),
				url('http://at.alicdn.com/t/font_1076597_rbju2ebsnm.woff') format('woff'),
				url('http://at.alicdn.com/t/font_1076597_rbju2ebsnm.ttf') format('truetype'),
				url('http://at.alicdn.com/t/font_1076597_rbju2ebsnm.svg#iconfont') format('svg');
			}
			.after{
				position: absolute;
				top: 0;
				right: 0;
				height: 0.77rem;
				line-height: 0.77rem;
				width: 1.5rem;
				box-sizing: border-box;
				cursor: pointer;
				text-align: right;
				padding-right: 0.3rem;
				color: #fff;
				font-size: 0.3rem;
			}
			.after:after {
			    font-family: "iconfont2";
			    content: "\e61c"; 
			}
			.part-canvas p {
				font-size: 0.28rem;
				text-align: center;
				line-height: 2;
				color: #333;
			}
		</style>
	</head>
	<body>
		<nav>
			<ul class="nav-tab">
                <li id="zu"><a href="javascript:void(0)" title=""><span>小组查询</span></a></li>
			</ul>
		</nav>
		<div class="cont">
	            <div class="selBox">
	                <div class="table_box">
					<div class="table_cont"  id="xzu" value="">
						全部小组
					</div>
				</div>
				<div class="table_list">
					<p class="table_xxcont" onclick="findstatistic(0,2,'全部小组')">
						全部小组
					</p>
                    <volist name="deptarr" id="vo" key="k">
                    	<!-- <p class="table_xxcont" onclick="findstatistic()">
					   		xxx小组
						</p> -->
	                </volist>
				</div>
			</div>
			<!-- 统计图 -->
			<!-- 班级、小组学习情况统计 -->
			<div class="partCont">
				<h3><span id="title_name">全部小组</span>学习情况统计</h3>
				<div class="teamstatus">
					<div class="team-statop">
						<p>
							共有
							<span id="study_num" class="team-colred">
								0	
							</span>
							人学习
						</p>
						<ul>
							<li>人均学习<span id="study_rj_time" class="team-colred">
								0
							</span>h</li>
							<li>累计学习<span id="study_z_time" class="team-colred">
								0
							</span>h</li> 
						</ul>
					</div>
					<div class="team-stabot">
						<p class="p-left">
							<span id="student1">
								
							</span>
							<span id="student_time1">0h</span>
						</p>
						<p class="p-center">
							<span id="student0">
								
							</span>
							<span id="student_time0">0h</span>
						</p>
						<p class="p-right">
							<span id="student2">
								
							</span>
							<span id="student_time2">0h</span>
						</p>
					</div>
				</div>
			</div>
			<!-- 学习时间分布图 -->
			<div class="partCont">
				<div class="part-tit">学生学习时间分布图</div>
				<div class="part-canvas">
					<div id="eart1"></div>
				</div>
			</div>
			<!-- 画像总览 -->
			<div class="partCont">
				<div class="part-tit">学生画像体系总览</div>
				<div class="part-canvas">
					<div id="eart5" style="width: 100%;height: 6rem;"></div>
					<p>参与考试人数：<span id="exam_num">0</span>人</p>
					<p>未参与考试人数：<span id="no_exam_num">0</span>人</p>
					<p>最高分：<span id="total_score_max">0</span>分&nbsp;&nbsp;最低分：<span id="total_score_min">0</span>分</p>
					<p>不及格：<span id="fail_num">0</span>人&nbsp;&nbsp;及格：<span id="pass_num">0</span>人&nbsp;&nbsp;良好：<span id="good_num">0</span>人  
					&nbsp;&nbsp;优秀：<span id="excellent_num">0</span>人</p>
				</div>
			</div>	
		<!-- 学习时间统计图 -->
			<!-- 学习时间统计图 -->
			<div class="partCont">
				<div class="part-tit">学习时间统计图</div>
				<div class="part-canvas">
					<div id="eart2"></div>
				</div>
			</div>	
			<!-- 学习态度 -->
			<div class="partCont">
				<div class="part-tit">学习态度</div>
				<div class="part-taiducont">
					<div class="taidu">
						<h4>
							作业完成率/课程共有<span id="zuoyeNum">0</span>个作业
						</h4>
						<div id="eart3-1"></div>
						<p>
							完成
							<span id="worksyes">
								0
							</span>
							人/次
						</p>
						<p>
							<span id="worksno">
								0
							</span>
							人/次没完成作业
						</p>
					</div>
					<div class="taidu">
						<h4>
							参与调查次数/课程共有<span id="diaochaNum">0</span>个调查
						</h4>
						<div id="eart3-2"></div>
						<p>
							共参与
							<span id="surveyyes">
								0
							</span>
							人/次
						</p>
						<p>
							<span id="surveyno">
								0
							</span>
							人/次没参加
						</p>
					</div>
					<div class="taidu" style="border-bottom:0;">
						<h4>参与讨论的次数/课程共有<span id="taolunNum">0</span>个话题</h4>
						<div id="eart3-3"></div>
						<p>
							共回帖
							<span id="discussyes">
								0
							</span>
							次
						</p>
						<p>
							<span id="discussno">
								0
							</span>
							人/次没回答
						</p>					
					</div>
				</div>
			</div>
			<!-- 学习效果 -->
			<!-- <div class="partCont">
				<div class="part-tit">学习效果</div>
				<div class="part-canvas">
					<div id="eart4"></div>
				</div>
			</div> -->
		</div>
	</body>
	<script type="text/javascript" src="../../script/jquery.min.js"></script>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/echarts.min.js"></script>
	<script type="text/javascript" src="../../script/resize.js"></script>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script type="text/javascript">
		var currentPrefix = 'http://test.analysis.cfnet.org.cn/index/index/';
		if (urlPrefix == 'http://apibase.cfnet.org.cn/index.php/') {//正式
			currentPrefix = 'http://analysis.cfnet.org.cn/index/index/';
		}
		//获取分析小组列表
		var url_analysisTeamList = currentPrefix + 'getGroupInfo';
		//获取学习时间分布数据
		var url_analysisStudyFenBu = currentPrefix + 'coursedetailPhone';
		//获取时间统计图
		var url_analysisStudyTongJi = currentPrefix + 'ajaxLearnStatis';
		//获取学习态度
		var url_analysisStudyTaiDu = currentPrefix + 'ajaxAttitude';
		//获取学习效果
		var url_analysisStudyXiaoGuo = currentPrefix + '';
		//获取画像数据
		var url_analysisStudyHuaXiang = currentPrefix + 'portraitOverviewMobile';
		$(function() {
			$('.table_box').click(function() {
				if(event && event.stopPropagation) {
					//因此它支持W3C的stopPropagation()方法 
					event.stopPropagation();
				} else {
					//否则，我们需要使用IE的方式来取消事件冒泡 
					window.event.cancelBubble = true;
				}
				$(this).next('.table_list').toggle();
			});
			$('.table_xxcont').click(function() {
				if(event && event.stopPropagation) {
					//因此它支持W3C的stopPropagation()方法 
					event.stopPropagation();
				} else {
					//否则，我们需要使用IE的方式来取消事件冒泡 
					window.event.cancelBubble = true;
				}
				var cont = $(this).html();
				var competition_types = $(this).attr('data-v');
				$(this).parent().prev('.table_box').find('.table_cont').html(cont);
				$('.table_list').hide();
			})
			$("body").on('click', function(event) {
				if(event && event.stopPropagation) {
					//因此它支持W3C的stopPropagation()方法 
					event.stopPropagation();
				} else {
					//否则，我们需要使用IE的方式来取消事件冒泡 
					window.event.cancelBubble = true;
				}
				$(".table_list").hide();
			});
		});
		function seteam(num){
			$(".nav-tab>li").on("click",function(){
				if(num==1){
					$(".nav-tab>li").removeClass("nav-tab-active");
					$(this).addClass("nav-tab-active");
				}else{
					$(".nav-tab>li").removeClass("nav-tab-active");
					$(this).addClass("nav-tab-active");    
				}
			});
        }
        $(function(){
		    if("{$types}" ==1){
		        $("#zu").removeClass("nav-tab-active");
				$("#ban").addClass("nav-tab-active");
		    }else{
		        $("#ban").removeClass("nav-tab-active");
				$("#zu").addClass("nav-tab-active"); 
		    }
		});
	</script>
	<script type="text/javascript">
		var courseid, planid, jid, currentTeamId = 0, currentType = 2, currentTitle = '全部小组';
		apiready = function(){
			loadData();
			setRefreshHeader();
		}
		function loadData(){
			prepareData();
			loadTeamData();
			loadEchartsData();
		}
		function prepareData(){
			courseid = api.pageParam.courseid;
			planid = api.pageParam.planid;
			jid = $api.getStorage('cfnetppjxid');
			// courseid = 21669;
			// planid = 7479;
			// jid = 267;
		}
		function loadTeamData(){
			var params = {
				cid : courseid,
				realpid : planid,
				jid: jid
			};
			cfnetppPOST(url_analysisTeamList, params, true, function(data, status){
				if (status == 'success') {
					if (data.code == 200) {
						var teamList = data.data.deptarr;
						if (teamList != null && teamList != undefined && teamList.constructor == Array && teamList.length > 0) {
							setupTeamList(teamList);
						}
					}
				}
			});
		}
		function setupTeamList(arr){
			var teamListString = '';
			for (var i = 0; i < arr.length; i++) {
				var data = arr[i];
				var teamStr =  teamHtmlStringWithData(data);
				teamListString += teamStr;
			}
			console.log(teamListString);
			$('#vo').html(teamListString);
		}
		function teamHtmlStringWithData(data){
			var param = data.id + ', 2, \'' + data.names + '\'';
			return '<p class="table_xxcont" onclick="findstatistic('+param+')">'+
			   	data.names+
			'</p>';
		}
		function findstatistic(id,type,title){
			if (id == currentTeamId) {
				return;//一样则不刷新
			}else{
				currentTeamId = id;
				currentType = type;
				currentTitle = title;
			}
			if(type==1){
				      
			}else{
				loadEchartsData();
			}
        }
		function loadEchartsData(){
			api.showProgress({
			    style: 'default',
			    animationType: 'fade',
			    title: '',
			    text: '加载中...',
			    modal: false
			});
			var params = {
				cid : courseid,
				realpid : planid,
				jid: jid,
				types: currentType,
				temid: currentTeamId
			};
			cfnetppPOST(url_analysisStudyFenBu, params, true, function(data, status){
				api.hideProgress();
				api.refreshHeaderLoadDone();
				if (status == 'success') {
					if (data.code == 200) {
						setupTopData(data.data);
						setupEchart1(data.data);
					}
				}
				loadEcharts5Data(params);
			});
		}
		function setupTopData(data) {
			$('#xzu').html(currentTitle);
			$('#title_name').text(currentTitle);
			$('#study_num').text(valueNull(data.sumuser));
			$('#study_rj_time').text(valueNull(data.avgtotaltime));
			$('#study_z_time').text(valueNull(data.sumtotaltime));
			var top3Arr = data.top3;
			if (top3Arr != null && top3Arr != undefined && top3Arr.constructor == Array && top3Arr.length > 0) {
				for (var i = 0; i < top3Arr.length; i++) {
					var top = top3Arr[i];
					$('#student'+i).text(valueNull(top3Arr[i].courseusername));
					$('#student_time'+i).text(valueNull(top3Arr[i].totaltime) + 'h');
				}
			}
		}
		function valueNull(value){
			if (value == null || value == undefined) {
				return '';
			}
			return value;
		}
		function setupEchart1(data){
			var nei = data.fenbu.nei;
			var neiKeyArr = new Array();
			var neiKeyValArr = new Array();
			if (nei != null && nei != undefined) {
				Object.keys(nei).forEach(function(key){
					var val = nei[key];
					if (val != 0) {
						neiKeyArr.push(key);
						neiKeyValArr.push({
							value: val,
							name: key
						});
					}
				});
			}
			var wai = data.fenbu.wai;
			var waiKeyArr = new Array();
			var waiKeyValArr = new Array();
			if (wai != null && wai != undefined) {
				Object.keys(wai).forEach(function(key){
					var val = wai[key];
					if (val != 0) {
						waiKeyArr.push(key);
						waiKeyValArr.push({
							value: val,
							name: key
						});
					}
				});
			}
			//学生学习时间分布
		    // 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('eart1'));
			option = {
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {d}%"
			    },
			    legend: {
			    	// orient: 'vertical',
			    	x : 'left', 
			    	data: waiKeyArr    
			    },
                toolbox: {
			        show : true,
			        feature : {
			            mark : {show: true},
			            restore : {show: false},
			            saveAsImage : {show: false}
			       	}
			    }, 
		    	calculable : false,
		    	series : [
		        	{
			            type:'pie',
			            selectedMode: 'single',
			            radius : [0, '25%'],
			            center:['50%','65%'],
			            itemStyle : {
			                normal : {
			                    label : {
			                        position : 'inner'
			                    },
			                    labelLine : {
			                        show : false
			                    }
			                }
			            },
			            color: ['#ff6347', '#1e90ff'],
			            data: neiKeyValArr
			        },
			        {
			            name:'类型',
			            type:'pie',
			            radius : ['40%', '60%'],
			            center:['50%','65%'],
			            stillShowZeroSum:false, 
						data: waiKeyValArr,	            
						label: {
							normal: {
								formatter: '{b|{b}} ',
								rich: {
									b: {
										align: 'center'
									}
								}
							}
						},
						labelLine : {
							normal: {
			                    show : true,
			                    length:10,
			                    length2:20
			                }
		                },				
						color: ['#87cefa', '#ff7f50', '#ffa500', '#cd5c5c','#32cd32','#da70d6']
				        }
				    ]
				};
			myChart.setOption(option);
		}
		function loadEcharts2Data(params){
			cfnetppPOST(url_analysisStudyTongJi, params, true, function(data, status){
				if (status == 'success') {
					if (data.code == 200) {
						setupEchart2(data.data);
					}
				}
				loadEcharts3Data(params);
			});
		}
		function setupEchart2(data){
			var timeArr = data.shijiantj_one;
			var valueArr = data.shijiantj_two;
			if (timeArr == null || valueArr == null) {
				return;
			}
			//学习时间统计
			var myChart = echarts.init(document.getElementById('eart2'));
			option = {
			    tooltip : {
			        trigger: 'item',
					formatter: "{b} <br/>{a} : {c}分钟"
			    },
			    legend: {
			        data:['学习时间']
			    },
			    toolbox: {
			        show : true,
			        feature : {
			            mark : true,
			            restore : true,
			            saveAsImage : true
			        }
			    },
			    //calculable : true,
			    dataZoom : {
			        show : true,
			        realtime : true
			    },
			    color:['#ff7f50'],
				xAxis : [
			        {
			            type : 'category',
			            boundaryGap : true,
			            data : timeArr
			        }
			    ],
				yAxis : [
			        {
			            type : 'value',
			            splitArea : {show : true}
			        }
			    ],
			    series : [
			        {
			            name:'学习时间',
			            type:'bar',
			            data: valueArr
			        }
			    ]
			};
			myChart.setOption(option);
		}
		function loadEcharts3Data(params){
			cfnetppPOST(url_analysisStudyTaiDu, params, true, function(data, status){
				if (status == 'success') {
					if (data.code == 200) {
						setupEchart3(data.data);
					}
				}
				// loadEcharts4Data(params);
			});
		}
		function loadEcharts5Data(params){
			cfnetppPOST(url_analysisStudyHuaXiang, params, true, function(data, status){
				if (status == 'success') {
					if (data.code == 200) {
						setupEchart5(data.data);
					}
				}
				loadEcharts2Data(params);
			});
		}
		function numValueNull(value){
			if (value == null || value == undefined) {
				return 0;
			}
			return value;
		}
		function setupEchart3(data){
			var taidu = data.taidu;
			if (taidu == null) {
				return;
			}
			var zuoyeNum = numValueNull(taidu.num1["作业"]);
			$('#zuoyeNum').text(zuoyeNum);
			var diaochaNum = numValueNull(taidu.num1["调查"]);
			$('#diaochaNum').text(diaochaNum);
			var taolunNum = numValueNull(taidu.num1["讨论"]);
			$('#taolunNum').text(taolunNum);
			var worksno =  numValueNull(taidu.num2.worksno);
			$('#worksno').text(worksno);
            var worksyes = numValueNull(taidu.num2.worksyes);
            $('#worksyes').text(worksyes);
            var surveyno = numValueNull(taidu.num2.surveyno);
            $('#surveyno').text(surveyno);
            var surveyyes = numValueNull(taidu.num2.surveyyes);
            $('#surveyyes').text(surveyyes);
            var discussno = numValueNull(taidu.num2.discussno);
            $('#discussno').text(discussno);
            var discussyes = numValueNull(taidu.num2.discussyes);
            $('#discussyes').text(discussyes);
			// 学习态度
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('eart3-1'));
			option = {
				tooltip : {
					trigger: 'item',
					formatter: worksyes+"次"
				},
			    toolbox: {
			        show : true,
			        feature : {
			            mark : {show: true}
			        }
			    },
			    calculable : false,
			    series : [
			        {
			            type:'pie',
			            radius : [0, 29],
						itemStyle : {
			                normal : {
			                    label : {
			                        show : false
			                    },
			                    labelLine : {
			                        show : false
			                    }
			                }
			            },
			            color: ['#87cefa', '#ff7f50'],
			            data:[
							{value:worksno},
		                	{value:worksyes}    
			            ]
			        }
			    ]
			};
			myChart.setOption(option);
			var myChart = echarts.init(document.getElementById('eart3-2'));
			option = {
				tooltip : {
					trigger: 'item',
					formatter: surveyyes+"次"
				},
			    toolbox: {
			        show : true,
			        feature : {
			            mark : {show: true},
			        }
			    },
			    calculable : false,
			    series : [
			        {
			            type:'pie',
			            radius : [0, 29],
			            itemStyle : {
			                normal : {
			                    labelLine : {
			                        show : false
			                    }
			                }
			            },
			            color: ['#87cefa', '#ff7f50'],
			            data:[
							{value:surveyno},
		                	{value:surveyyes}   
			            ]
			        }
			    ]
			};
			myChart.setOption(option);	
			var myChart = echarts.init(document.getElementById('eart3-3'));
			option = {
				tooltip : {
					trigger: 'item',
					formatter: discussyes+"次"
				},
			    toolbox: {
			        show : true,
			        feature : {
			            mark : {show: true},
			        }
			    },
			    calculable : false,
			    series : [
			        {
			            type:'pie',
			            radius : [0, 29],
			            itemStyle : {
			                normal : {
			                    labelLine : {
			                        show : false
			                    }
			                }
			            },
			            color: ['#87cefa', '#ff7f50'],
			            data:[
							{value:discussno},
		                	{value:discussyes}, 
			            ]
			        }
			    ]
			};
			myChart.setOption(option);
		}
		function setupEchart5(data){
			var exam_num = data.exam_num;
			$('#exam_num').text(numValueNull(exam_num));
			var no_exam_num = data.no_exam_num;
			$('#no_exam_num').text(numValueNull(no_exam_num));
			var total_score_min = data.total_score_min;
			$('#total_score_min').text(numValueNull(total_score_min));
			var total_score_max = data.total_score_max;
			$('#total_score_max').text(numValueNull(total_score_max));
			var fail_num = data.fail_num;
			$('#fail_num').text(numValueNull(fail_num));
			var pass_num = data.pass_num;
			$('#pass_num').text(numValueNull(pass_num));
			var good_num = data.good_num;
			$('#good_num').text(numValueNull(good_num));
			var excellent_num = data.excellent_num;
			$('#excellent_num').text(numValueNull(excellent_num));
			var score_level = data.score_level;
			var score_level_desc = data.score_level_desc;
			if (score_level == null || score_level_desc == null) {
				return;
			}
			var myChart = echarts.init(document.getElementById("eart5"));
			option = {
			    title : {
			        text: '',
			        x:'center'
			    },
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {c} ({d}%)"
			    },
			    legend: {
			        x : 'left',
			        //y : 'bottom',
			        data:score_level_desc
			    },
			    color:["#ff7f50","#87cefa","#da70d6","#32cd32"],
			    toolbox: {
			        show : false,
			    },
			    calculable : false,
			    series : [
			        {
			            name:'',
			            type:'pie',
			            radius : '50%',
			            center: ['50%', '60%'],
			            data:score_level
			        }
			    ]
			};
			myChart.setOption(option);
		}
		function setupEchart4(){
			var myChart = echarts.init(document.getElementById('eart4'));
			option = {
				color:['#87cefa','#ff7f50','#ffa500','#cd5c5c'], 
		        tooltip : {
		        	trigger: 'item',
					formatter: 'loading'
		    	},
		 		legend: {
			    	data:['评价','系统操作','测验','作业','flash游戏'],  
			    	x : 'right',
			    },
		 		toolbox: {
			        show : true,
			        feature : {
			            mark : {show: true}
			        }
			    },	 
			    calculable : true,   
			    dataZoom : {
			        show : true,
			        realtime : true,
			        start : 0,
			        end : 100
			    },
			    xAxis : [
			        {
			            type : 'category',
			            position: 'bottom',
			            boundaryGap : true,
						// x轴的颜色和宽度
						axisLine: {
							show:true,
							lineStyle: {
								style:'solid',
								color: '#007300',
								width:2//这里是坐标轴的宽度
							}
						},	
						//轴标记
						axisTick:{
							show:true,
							length:10,
							lineStyle: {
								style:'solid',
								color: '#fd1e1e',
								width:2//这里是坐标轴的宽度
							}					
						},				 
						// x轴的字体样式
						axisLabel: {
							show: true,
							interval:'auto',
							margin: 8,
		                	// formatter: '',
			                textStyle: {
			                    color: 'blue',
			                    fontFamily: 'sans-serif',
			                     fontSize: 12,
			                    fontStyle: 'italic',
			                    fontWeight: 'bold'
			                }
						},	
						splitLine : {
			                show:true,
			                lineStyle: {
			                    color: '#483d8b',
			                    type: 'dashed',
			                    width: 1
			                }
			            },
			            splitArea : {
			                show: true,
			                areaStyle:{
			                    color:['rgba(144,238,144,0.3)','rgba(135,200,250,0.3)']
			                }
			            },							           
			    		data : [
		                	'2018-05-21',
		                	'2018-05-25',
		                	'2018-05-31',
		                	'2018-06-05'
		            	]
			        }
			    ],
			    yAxis : [
			        {
		 				type : 'value',
			            position: 'left',
			            splitNumber: 5,
			            boundaryGap: [0,0.1],
			            axisLine : {    // 轴线
			                show: true,
			                lineStyle: {
			                    color: 'red',
			                    type: 'dashed',
			                    width: 2
			                },
							//数值多时解决自动隐藏
							interval: 0	                
			            },
			            axisTick : {    // 轴标记
			                show:true,
			                length: 10,
			                lineStyle: {
			                    color: 'green',
			                    type: 'solid',
			                    width: 2
			                }
			            },
			            axisLabel : {
			                show:true,
			                interval: 'auto',    // {number}
			                rotate: -45,
			                margin: 8,
			                textStyle: {
			                    color: '#1e90ff',
			                    fontFamily: 'verdana',
			                    fontSize: 10,
			                    fontStyle: 'normal',
			                    fontWeight: 'bold'
			                }
			            },
			            splitLine : {
			                show:true,
			                lineStyle: {
			                    color: '#483d8b',
			                    type: 'dotted',
			                    width: 2
			                }
			            },
			            splitArea : {
			                show: true,
			                areaStyle:{
			                    color:['rgba(205,92,92,0.3)','rgba(255,215,0,0.3)']
			                }
			            }					            
			        }
			    ],
			    series : [
					{
			            name: '评价',
			            type: 'bar',
			            data:[50, 100, 100, 40]
			        },
					{
			            name: '系统操作',
			            type: 'bar',
			            data:[100, 20, 30, 200]
			        },
					{
			            name: '测验',
			            type: 'bar',
			            data:[120, 210, 10, 90]
			        },
					{
			            name: '作业',
			            type: 'bar',
			            data:[100, 200, 40, 100]
			        },
			        {
			            name: 'flash游戏',
			            type: 'bar',
			            data:[100, 200, 200, 100]
			        }
			    ]
			};
			myChart.setOption(option);
		}
		//下拉刷新
		function setRefreshHeader() {
			api.setRefreshHeaderInfo({
				visible : true,
				bgColor : '#ccc',
				textColor : '#fff',
				textDown : '下拉刷新...',
				textUp : '松开刷新...',
				showTime : true
			}, function(ret, err) {
				loadData();
			});
		}
	</script>
</html>